<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <heading grade="1">员工管理</heading>
      <el-form v-bind="getFormProps()">
        <el-button @click="add()">新建员工</el-button>
        <el-input class="search-input" placeholder="请输入员工信息" icon="search" v-model="query.keyWord" ></el-input>
      </el-form>
      <el-table
        :data="employee_list.list"
        style="width: 100%">
        <el-table-column
          prop="nickName"
          label="账号昵称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="roleName"
          label="职务"
          width="110"
          align="center">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="姓名"
          align="center"
          width="70">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系手机"
          width="130"
          align="center">
        </el-table-column>
        <el-table-column
          prop="contactWayEmail"
          label="联系邮箱"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          prop="permission"
          label="现有权限"
          :render-header="renderHeader"
          width="125"
          align="center">
          <template scope="scope">
            <el-tooltip placement="bottom" effect="light">
              <div slot="content">
                <ul class="content-ul">
                  <li v-for="item in employee_organize_service" :key="item.id">{{item.serviceName}}</li>
                </ul>
              </div>
              <span @mouseenter="rolePermission(scope.$index, scope.row)">查看权限</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template scope="scope">
            <el-button @click="edit(scope.$index, scope.row)" type="text" size="small" class="link">修改角色</el-button>
            <el-button @click="releaseContact($event, scope.$index, scope.row)" type="text" size="small" class="link">解除关系</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="content" v-show="hasShow">
        <ul class="content-ul permission" >
          <li v-for="item in employee_ip_rest_list" :key="item.id">{{item.serviceName}}</li>
        </ul>
      </div>
      <el-pagination
        v-bind="getPaginationProps(employee_list)"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        >
      </el-pagination>
      <div v-if="query.keyWord == 'slider'">
      <br/>
      <br/>
       <slider v-model="active" :list="list">
        <template scope="scope">
          {{scope}}
        </template>
      </slider>
      {{active}}
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import api from 'api/employee'
import { pagingList } from 'utils/mixins'
import Slider from '../components/Slider'
export default {
  mixins: [pagingList],
  components: {
    Slider
  },
  data () {
    return {
      list: [{value: 0, label: 'label0'}, {value: 1, label: 'label1'}, {value: 2, label: 'label2'}, {value: 3, label: 'label3'}, {value: 4, label: 'label4'}, {value: 5, label: 'label5'}, {value: 6, label: 'label6'}, {value: 7, label: 'label7'}],
      active: 1,
      query: this.getQuery(),
      hasShow: ''
    }
  },
  computed: {
    ...mapGetters({
      employee_organize_service: 'employee_organize_service', // 获取roleId角色的权限列表
      employee_list: 'employee_list', // 员工管理列表数据
      employee_ip_rest_list: 'employee_ip_rest_list'  // 获取现有权限列表
    })
  },
  methods: {
    add () { // 新增员工
      this.$router.push({ name: 'addEmployee' })
    },
    edit (index, row) { // 修改角色
      this.$router.push({name: 'editEmployee', query: {roleId: row.roleId, userId: row.userId}})
    },
    releaseContact (e, index, row) {
      api.release({
        userId: row.userId
      }, {context: e.target, successMsg: '解除成功'}).then(res => {
        this.$store.dispatch('employee_list', this.query)
      })
    },
    rolePermission (index, row) {
      this.$store.dispatch('employee_organize_service', {roleId: row.roleId})  // 获取该roleId权限列表
    },
    ipResList () {
      if (this.$store.getters.employee_ip_rest_list.length === 0) {
        this.$store.dispatch('employee_ip_rest_list')
      } else {
        this.employee_ip_rest_list = this.$store.getters.employee_ip_rest_list
      }
      this.hasShow = true
    },
    unIpList () {
      this.hasShow = false
    },
    fetch (query) { // 分页，和搜索表单发生提交时触发事件
      this.$store.dispatch('employee_list', query)
    },
    renderHeader (createElement, { column }) {  // 动态创建事件
      return createElement(
        'div',
        [
          createElement('span', {
            domProps: {
              innerHTML: column.label + '？'
            },
            on: {
              mouseenter: this.ipResList,
              mouseleave: this.unIpList
            }
          })
        ]
      )
    }
  }
}
</script>
<style>
.content .el-table tbody tr{
  font-size: 12px
}
</style>

<style lang="scss" scoped>
.content {
  position: relative
}

.search-input {
  float: right;
}

.content-ul {
  font-size: 12px;
  font-weight: 400;
  width: 300px;
}

.content-ul li{
  float: left;
  margin:0 5px
}

.permission {
  position: absolute;
  top: 190px;
  right: 90px;
  padding: 20px;
  margin: 5px;
  min-height: 80px;
  line-height: 20px;
  width: 332px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  background: #fff;
}

</style>
